<template>
	<view class="page">
		<u-navbar title="商户管理" class="nav" :placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true">
			<view slot="left">
				<u-icon name="arrow-left" size="12" @click="onClickBack"></u-icon>
			</view>
			<view slot="right" @click="onClickRight">
				所有商户
			</view>
		</u-navbar>
		<view class="bgCol  bg-blue">
		</view>
		<view class="mianBox">
		
			<view class="mainNav">
				<view class="text-l">
					累计商户数(户)：
					<text class="text-blue">{{totalMerchant}}</text>
				</view>
				<view class="cu-list grid col-2 margin-top">
					<view class="cu-item" v-for="(item, index) in mainList" :key="index">
						<navigator :url="item.path" hover-class="none">
							<view class="flex">
								<image class="margin-top-sm" :src="item.icon" style="width:60rpx;height:60rpx;" mode=""></image>
								<view class="tl margin-left">
									<view class="">{{ item.num }}</view>
									<text>{{ item.title }}</text>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		
			<scroll-view scroll-x class="bg-white nav padding-left padding-right">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index === TabCur ? 'text-blue cur' : ''" v-for="(item, index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.name }}
					</view>
				</view>
			</scroll-view>
			<view class="showBox showBox1">
				<view class="" v-if="dataList.length > 0">
					
					<view class="cu-list menu-avatar">
						<view class="cu-item cur"  v-for="(item, index) in dataList" :key="index" @click="detail(item.id, item.username)">
							<view class="cu-avatar radius lg">
								<view>
									<u-avatar :src="item.doorPic?item.doorPic:'../../static/icon/icon_xw.png'" size="48" shape="square"></u-avatar>
								</view>
							</view>
							<view class="content">
								<view>
									<view class="text-cut">{{item.merchantName || '默认商户名'}}</view>
								</view>
								<view class="text-gray text-sm flex">
									<view class="text-cut">
										<text>月交易：{{item.order_amount_sum || 0}}</text>
										<text class="w-ml-15">月分润：{{item.amount_sum || 0}}</text>
									</view>
								</view>
							</view>
							<view class="action">
								<!-- <view class="main-color text-xl">{{item.loginfailure}}</view> -->
							</view>
						</view>
					</view>
					
				</view>
				<u-empty v-else mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无商户"></u-empty>
			</view>
		
			
		</view>
	</view>
</template>

<script>
import {format} from  "@/util/common.js"
export default {
	data() {
		return {
			totalMerchant: 0,
			mainList: [
				{
					color: 'orange',
					icon: '/static/icon/shop1.jpg',
					num: 0,
					title: '审核通过',
					path: '/pages/index/reviewRejected?shopMenu=2'
				},
				{
					color: 'orange',
					icon: '/static/icon/shop2.jpg',
					num: 0,
					title: '资料待完善',
					path: '/pages/index/reviewRejected?shopMenu=3'
				},
				{
					color: 'blue',
					icon: '/static/icon/shop3.jpg',
					num: 0,
					title: '审核不通过',
					path: '/pages/index/reviewRejected?shopMenu=5'
				},
				{
					color: 'green',
					icon: '/static/icon/shop4.jpg',
					num: 0,
					title: '待审核',
					path: '/pages/index/reviewRejected?shopMenu=1'
				}
			],
			tabList: [
				// {
				// 	name: '下滑超20%'
				// },
				{
					name: '全部'
				},
				{
					name: '三天无交易'
				},
				{
					name: '七天无交易'
				},
				
			],
			TabCur: 0,
			scrollLeft: 0,
			dataList: [],
			format,
			
		};
	},
	onShow() {
		this.initDataList(this.TabCur)
		this.getMerchantDynamics()
	},
	onReady() {
		
	},
	methods: {
		async getMerchantDynamics () {
			let params = {
				agentid: uni.getStorageSync("YNF_INFO").user_id,
				leshuastatus: 8
			}
			const res = await this.$API({url: '/api/index/user_agent',method:"GET", data: params})
			if (res.code === 1) {
				this.totalMerchant = res.data.leshua0+res.data.leshua1+res.data.leshua2+res.data.leshua5
				
				this.mainList[0].num = res.data.leshua2
				this.mainList[1].num = res.data.leshua0
				this.mainList[2].num = res.data.leshua5
				this.mainList[3].num = res.data.leshua1
			}
			
		},
		async initDataList (type) {
			this.dataList = []
			let params = {
				agentid: uni.getStorageSync("YNF_INFO").user_id,
				start_time: this.formatTimer(Number(new Date().getTime() - 3600 * 1000 * 24 * 2)) + ' '+ '00:00:00' || null,
				end_time: this.formatTimer(Number(new Date())) + ' '+ '23:59:59' || null,
			}
			if (type === 2) {
				params.start_time = this.formatTimer(Number(new Date().getTime() - 3600 * 1000 * 24 * 6)) + ' '+ '00:00:00' || null;
			}
			if(type === 0) {
				params.start_time = null
				params.end_time = null
			}
			const res = await this.$API({url: '/api/index/lower_agent', method:"GET", data: params})
			if (res.code === 1) {
				
				this.dataList = res.data
			}
		},
		detail (id,username) {
			uni.navigateTo({
				url: '/pages/index/agentInfo?id='+id+'&username='+username
			})
		},
		formatTimer(time) {
			var time = new Date(time);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();

			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		//跳转提现页面
		toWithdraw() {
			uni.navigateTo({
				url: '/pages/my/take'
			});
		},
		//跳转邀请好友页面
		toInvite() {
			uni.navigateTo({
				url: '/pages/my/invite'
			});
		},
		//查看订单
		lookOrder() {
			uni.navigateTo({
				url: '/pages/my/order'
			});
		},
		//去其他服务页
		toService(url) {
			uni.navigateTo({
				url: url
			});
		},
		onClickBack() {
			uni.navigateBack();
		},

		onClickRight() {
			// do something...
			uni.navigateTo({
				url: '/pages/index/reviewRejected?shopMenu=8'
			})
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.initDataList(this.TabCur)
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		}
	}
};
</script>

<style scoped lang="scss">
page {
	padding-bottom: 50rpx;
	.mainNav {
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		width: 690rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.msg {
			display: flex;
			.item {
				margin: 20rpx 0;
				flex: 1;
				text-align: center;
			}
		}
	}
	.showBox {
		width: 100%;
		min-height: 600rpx;
		background: #fff;
		.item {
			padding: 10rpx 20rpx;
			border: 1px solid #F1F1F1;
			margin: 0 20rpx;
		}
	}
	.cu-list.grid > .cu-item:after {
		border: none;
	}
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 46px - 30px - 60px);
	}
}
.bgCol {width:100%;height:240rpx;}
.page .mianBox{
	margin-top: -240rpx;
}
</style>
